<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Fetch Feed Example" 
    title_url="http://groups.google.com/group/Google-Gadgets-API" 
    scrolling="true">
  </ModulePrefs>
  <UserPref name="rss_url" display_name="RSS URL"/>
   <Content type="html"><![CDATA[<html>
	<head>
		<style>
			#slideshow {
				position: relative;
				left: 50px;				
			}
			#slider {
				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				-o-border-radius: 5px;
				border-radius: 5px;
				border: 1px solid #f0f0f0;
				-webkit-box-shadow: 2px 2px 2px gray;
				-moz-box-shadow: 2px 2px 2px gray;
				-o-box-shadow: 2px 2px 2px gray;
				box-shadow: 2px 2px 2px gray;				
				position: relative;				
				overflow: hidden;
			}
			#slider_inner, #slider_anim {
				position: absolute;
				left: 0px;
				top: 0px;								
			}
			#slider ul {
				margin: 0;
				padding: 0;					
			}
			#slider ul li {
				display: inline;
				float: left;
				margin: 0;
				padding: 0;				
				list-style: none;
				background-color: #ffffff;
			}
			#slider_inner {				
				display: none;
			}
			#mark {
				position: absolute;				
				top: 0px;
				width: 10px;
				height: 10px;
				border: none;
				background-color: #9f0000;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
				-webkit-box-shadow: 1px 1px 5px gray inset;
				-moz-box-shadow: 1px 1px 5px gray inset;
				-o-box-shadow: 1px 1px 5px gray inset;
				box-shadow: 1px 1px 5px gray inset;
				z-index: 10;
			}
			#pages {
				position: relative;				
				top: 10px;
				text-align: center;
			}
			#pages ul {
				margin: 0;
				padding: 0;
				text-align: center;
			}
			#pages li {
				list-style: none;
				display: inline;
			}
			#pages li a {
				position: relative;
				display: inline-block;
				width: 10px;
				height: 10px;
				text-decoration: none;
				font-family: arial;
				border: 1px solid #f0f0f0;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
				-webkit-box-shadow: 1px 1px 5px gray inset;
				-moz-box-shadow: 1px 1px 5px gray inset;
				-o-box-shadow: 1px 1px 5px gray inset;
				box-shadow: 1px 1px 5px gray inset;
				margin-right: 3px;
				margin-left: 3px;
				z-index: 20;
				font-size: 8pt;
				font-weight: bold;
			}
			#pages li a:active {
				background-color: rgba(0, 0, 255, 1);
			}
			#pages li a:hover {
				background-color: rgba(0, 0, 255, 0.3);
			}
			#slider_playback {
				background-color: rgba(0, 0, 0, 0.3);
			}
			#slideshow #play, #slideshow #pause {
				display: none;
				position: absolute;
				width: 50px;
				height: 50px;
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;
				z-index: 40;
				background-color: rgba(0,0,0,0.2);
				font-family: sans-serif;
				text-align: center;
				text-decoration: none;
				color: rgba(255,255,255,0.9);				
				text-shadow: 1px 1px 5px gray;
				line-height: 50px;
				font-size: 18pt;
				transition: background 0.5s;
			}
			#slideshow #play {				
				font-size: 24pt;
			}
			#slideshow #play:hover, #slideshow #pause:hover {
				background-color: rgba(0,0,0,0.4);
			}
			#slideshow:hover > #pause {
				display: block;
			}			
			#slideshow #play:active, #slideshow #pause:active {
				margin-top: 2px;
				background-color: rgba(0,0,0,0.6);
			}
			#query_play:target ~ #slideshow #slider #slider_anim {
				display: block;
			}
			#query_play:target ~ #slideshow #slider #slider_inner {
				display: none;
			}
			#query_play:target ~ #slideshow #play {
				display: none;
			}
			#query_pause:target ~ #slideshow #slider #slider_anim {
				display: none;
			}
			#query_pause:target ~ #slideshow #slider #slider_inner {
				display: block;
			}
			#query_pause:target ~ #slideshow #pages #page1 {
				background-color: #9f0000;
			}
			.prev, .next {
				text-decoration: none;
				position: absolute;
				width: 40px;
				height: 40px;
				font-family: "Trebuchet MS", Helvetica, sans-serif;
				text-align: center;
				font-size: 24pt;
				color: #ffffff;
				text-shadow: 0px  0px 1px #ffffff;				
				background: -webkit-radial-gradient(#0288D1 60%, #01579B 100%);
				background: -moz-radial-gradient(#0288D1 60%, #01579B 100%);
				background: -o-radial-gradient(#0288D1 60%, #01579B 100%);
				background: radial-gradient(#0288D1 60%, #01579B 100%);					
				-webkit-border-radius: 50%;
				-moz-border-radius: 50%;
				-o-border-radius: 50%;
				border-radius: 50%;				
				-webkit-box-shadow: 1px 1px 5px gray;
				-moz-box-shadow: 1px 1px 5px gray;
				-o-box-shadow: 1px 1px 5px gray;
				box-shadow: 1px 1px 5px gray;	
				border-bottom: 1px solid #01579B;
				border-right: 1px solid #01579B;
				cursor: pointer;
				z-index: 30;				
				font-weight: bold;
				display: none;
			}
			.prev:visited, .next:visited {
				color: #ffffff;
			}
			.prev:link, .next:link {
				color: #ffffff;
			}
			.prev:hover, .next:hover {
				margin-top: -1px;	
				-webkit-box-shadow: 2px 2px 5px gray;
				-moz-box-shadow: 2px 2px 5px gray;
				-o-box-shadow: 2px 2px 5px gray;
				box-shadow: 2px 2px 5px gray;	
			}
			.prev:active, .next:active {
				margin-top: 1px;
				-webkit-box-shadow: 0px 0px 5px gray;
				-moz-box-shadow: 0px 0px 5px gray;
				-o-box-shadow: 0px 0px 5px gray;
				box-shadow: 0px 0px 5px gray;
			}
			.prev {
				left: -50px;
			}
			#slideshow #prev1, #slideshow #next1 {
				display: block;
			}
		</style>
		<style>
			body {
				background-color: #f9f9f9;
			}
			#slideshow {								
				width: 410px;
			}
			#slider {
				width: 350px;
				height: 200px;				
			}		
			#slider ul {
				width: 300%;				
			}
			#slider ul li {
				width: 350px;
				height: 200px;					
			}
			#slider ul li div {
				padding: 10px;
			}
			#slider_inner {				
				-webkit-transition: left 0.2s ease-in-out;
				-moz-transition: left 0.2s ease-in-out;
				-o-transition: left 0.2s ease-in-out;
				transition: left 0.2s ease-in-out;				
			}
			#slider_anim {		
				-webkit-animation: slider 5s infinite;
				-moz-animation: slider 5s infinite;
				-o-animation: slider 5s infinite;
				animation: slider 5s infinite;
			}
			#mark {
				left: 145px;
				-webkit-animation: marker 5s infinite;
				-moz-animation: marker 5s infinite;
				-o-animation: marker 5s infinite;
				animation: marker 5s infinite;
			}
			#pages {				
				width: 350px;
			}		
			#slider_playback {
				width: 350px;
				height: 200px;				
			}
			#slideshow #play, #slideshow #pause {
				left: 150px;
				top: 75px;
			}
			.prev, .next {
				top: 80px;				
			}			
			.next {
				left: 360px;
			}			
		</style>
		<style>
			@-webkit-keyframes slider {
				0%, 20%, 100% {left: 0px;}				
				30% {left: -100%;}				
				50% {left: -100%;}				
				60% {left: -200%;}				
				80% {left: -200%;}				
			}
			@-moz-keyframes slider {
				0%, 20%, 100% {left: 0px;}				
				30% {left: -100%;}				
				50% {left: -100%;}				
				60% {left: -200%;}				
				80% {left: -200%;}				
			}
			@-o-keyframes slider {
				0%, 20%, 100% {left: 0px;}				
				30% {left: -100%;}				
				50% {left: -100%;}				
				60% {left: -200%;}				
				80% {left: -200%;}				
			}
			@keyframes slider {
				0%, 20%, 100% {left: 0px;}				
				30% {left: -100%;}				
				50% {left: -100%;}				
				60% {left: -200%;}				
				80% {left: -200%;}				
			}
			@-webkit-keyframes marker {
				0% {left: 152px; opacity: 0;}
				5% {left: 152px; opacity: 1;}
				20% {left: 152px; opacity: 1;}
				25% {left: 152px; opacity: 0;}
				30% {left: 170px; opacity: 0;}
				35% {left: 170px; opacity: 1;}
				50% {left: 170px; opacity: 1;}
				55% {left: 170px; opacity: 0;}
				60% {left: 188px; opacity: 0;}
				65% {left: 188px; opacity: 1;}
				80% {left: 188px; opacity: 1;}
				85% {left: 188px; opacity: 0;}
				100% {left: 152px; opacity: 0;}
			}
			@-moz-keyframes marker {
				0% {left: 152px; opacity: 0;}
				5% {left: 152px; opacity: 1;}
				20% {left: 152px; opacity: 1;}
				25% {left: 152px; opacity: 0;}
				30% {left: 170px; opacity: 0;}
				35% {left: 170px; opacity: 1;}
				50% {left: 170px; opacity: 1;}
				55% {left: 170px; opacity: 0;}
				60% {left: 188px; opacity: 0;}
				65% {left: 188px; opacity: 1;}
				80% {left: 188px; opacity: 1;}
				85% {left: 188px; opacity: 0;}
				100% {left: 152px; opacity: 0;}
			}
			@-o-keyframes marker {
				0% {left: 152px; opacity: 0;}
				5% {left: 152px; opacity: 1;}
				20% {left: 152px; opacity: 1;}
				25% {left: 152px; opacity: 0;}
				30% {left: 170px; opacity: 0;}
				35% {left: 170px; opacity: 1;}
				50% {left: 170px; opacity: 1;}
				55% {left: 170px; opacity: 0;}
				60% {left: 188px; opacity: 0;}
				65% {left: 188px; opacity: 1;}
				80% {left: 188px; opacity: 1;}
				85% {left: 188px; opacity: 0;}
				100% {left: 152px; opacity: 0;}
			}
			@keyframes marker {
				0% {left: 152px; opacity: 0;}
				5% {left: 152px; opacity: 1;}
				20% {left: 152px; opacity: 1;}
				25% {left: 152px; opacity: 0;}
				30% {left: 170px; opacity: 0;}
				35% {left: 170px; opacity: 1;}
				50% {left: 170px; opacity: 1;}
				55% {left: 170px; opacity: 0;}
				60% {left: 188px; opacity: 0;}
				65% {left: 188px; opacity: 1;}
				80% {left: 188px; opacity: 1;}
				85% {left: 188px; opacity: 0;}
				100% {left: 152px; opacity: 0;}
			}
			#query_pause:target ~ #slideshow #play,			
			#query_1:target ~ #slideshow #play,
			#query_2:target ~ #slideshow #play, 
			#query_3:target ~ #slideshow #play {
				display: block;
			}
			#query_pause:target ~ #slideshow #pages #mark,
			#query_pause:target ~ #slideshow #pause,
			#query_1:target ~ #slideshow #pause,
			#query_1:target ~ #slideshow #pages #mark,
			#query_2:target ~ #slideshow #pause, 
			#query_2:target ~ #slideshow #pages #mark,
			#query_3:target ~ #slideshow #pause,
			#query_3:target ~ #slideshow #pages #mark {
				display: none;
			}
			#query_1:target ~ #slideshow #slider #slider_anim {
				display: none;
			}
			#query_1:target ~ #slideshow #slider #slider_inner {
				display: block;
				left: 0;
			}
			#query_1:target ~ #slideshow #pages #page1 {
				background-color: #9f0000;
			}
			#query_2:target ~ #slideshow #slider #slider_anim {
				display: none;
			}
			#query_2:target ~ #slideshow #slider #slider_inner {
				display: block;
				left: -100%;
			}
			#query_2:target ~ #slideshow #pages #page2 {
				background-color: #9f0000;
			}
			#query_3:target ~ #slideshow #slider #slider_anim {
				display: none;
			}
			#query_3:target ~ #slideshow #slider #slider_inner {
				display: block;
				left: -200%;
			}
			#query_3:target ~ #slideshow #pages #page3 {
				background-color: #9f0000;
			}
			#query_1:target ~ #slideshow .prev,
			#query_1:target ~ #slideshow .next,
			#query_2:target ~ #slideshow .prev,
			#query_2:target ~ #slideshow .next,
			#query_3:target ~ #slideshow .prev,
			#query_3:target ~ #slideshow .next {
				display: none;
			}
			#query_1:target ~ #slideshow #prev1,
			#query_1:target ~ #slideshow #next1 {
				display: block;
			}
			#query_2:target ~ #slideshow #prev2,
			#query_2:target ~ #slideshow #next2 {
				display: block;
			}
			#query_3:target ~ #slideshow #prev3,
			#query_3:target ~ #slideshow #next3 {
				display: block;
			}
		</style>
	</head>
	<body>
		<span id="query_play"></span>
		<span id="query_pause"></span>
		<span id="query_1"></span>
		<span id="query_2"></span>
		<span id="query_3"></span>
		
		<div id="slideshow">
			<a href="#query_3" title="Go to the last slide" class="prev" id="prev1">&lt;</a>
			<a href="#query_2" title="Go to the 2nd slide" class="next" id="next1">&gt;</a>
			<a href="#query_1" title="Go to the 1st slide" class="prev" id="prev2">&lt;</a>
			<a href="#query_3" title="Go to the last slide" class="next" id="next2">&gt;</a>
			<a href="#query_2" title="Go to the 2nd slide" class="prev" id="prev3">&lt;</a>
			<a href="#query_1" title="Go to the first slide" class="next" id="next3">&gt;</a>			
			
			<a href="#query_play" title="Play" id="play">&#9658;</a>
			<a href="#query_pause" title="Pause" id="pause">II</a>
			
			<div id="slider">
				<div id="slider_anim">
					<ul>
						<li><div id="slide1">Slide 1</div></li>
						<li><div id="slide2">Slide 2</div></li>
						<li><div id="slide3">Slide 3</div></li>
					</ul>
				</div>
				<div id="slider_inner">
					<ul>
						<li><div id="slide1">Slide 1</div></li>
						<li><div id="slide2">Slide 2</div></li>
						<li><div id="slide3">Slide 3</div></li>
					</ul>
				</div>
			</div>
			
			<div id="pages">
				<div id="mark"></div>
				<ul>
					<li><a href="#query_1" id="page1">&nbsp;</a></li><li><a href="#query_2" id="page2">&nbsp;</a></li><li><a href="#query_3" id="page3">&nbsp;</a></li>			
				</ul>
			</div>
		</div>
	</body>
</html>
]]>
  </Content>
</Module>